<template>
	<view class="container">
		<!-- 用户信息区域（头像固定使用默认图，昵称从接口或本地存储获取） -->
		<view class="user-info-section">
			<view class="user-avatar">
				<!-- 头像图片：使用默认头像，添加aspectFill模式保持比例填充 -->
				<!-- 优化点：已添加默认图，避免因网络问题导致的图片加载失败空白问题 -->
				<image class="avatar" src="/static/image/default_avatar.jpg" mode="aspectFill"></image>
			</view>
			<!-- 用户名文本：从userInfo响应式数据中获取昵称展示 -->
			<text class="username">{{ userInfo.nickName }}</text>
		</view>

		<!-- 功能菜单区域（当前仅包含"我的订单"功能项） -->
		<view class="functions-section">
			<!-- 订单功能项：点击触发goToMyOrders方法跳转页面 -->
			<view class="function-item" @click="goToMyOrders">
				<view class="function-icon">
					<!-- 功能图标：使用购物车相关图标 -->
					<image src="/static/image/icon_cart.png" mode="aspectFit"></image>
				</view>
				<!-- 功能文本：显示"我的订单"文字 -->
				<text class="function-text">我的订单</text>
				<!-- 右侧箭头：指示该选项可点击跳转 -->
				<image class="arrow-right" src="/static/image/arrow_right.png" mode="aspectFit"></image>
			</view>
			
			<!-- 订单核销功能项：仅管理员可见 -->
			<view class="function-item" @click="goToVerificationList" v-if="userInfo.isAdmin">
				<view class="function-icon">
					<!-- 功能图标：使用核销相关图标 -->
					<image src="/static/image/icon_verification.png" mode="aspectFit"></image>
				</view>
				<!-- 功能文本：显示"订单核销"文字 -->
				<text class="function-text">订单核销</text>
				<!-- 右侧箭头：指示该选项可点击跳转 -->
				<image class="arrow-right" src="/static/image/arrow_right.png" mode="aspectFit"></image>
			</view>
		</view>

		<!-- 页脚区域：显示版本信息 -->
		<view class="footer">
			<text class="version">v1.0.0</text>
		</view>
	</view>
</template>

<script setup>
// 导入Vue的ref函数，用于创建响应式数据
import { ref } from 'vue';

// 声明用户信息响应式变量
// 初始值设置默认头像、"暂无"昵称，并明确非管理员身份
const userInfo = ref({
	avatarUrl: '/static/image/default_avatar.png',  // 头像地址
	nickName: '暂无',  // 昵称
	isAdmin: true     // 是否为管理员，默认为false
});

/**
 * 初始化用户信息函数
 * 从本地存储中获取用户配置信息并更新到userInfo
 * 包含错误处理，确保程序稳定性
 */
const initUserInfo = () => {
  try {
    // 从本地存储中获取键为'userConfig'的数据
    const userConfig = uni.getStorageSync('userConfig');
    console.log('用户配置信息：', userConfig);
    
    // 如果存在用户配置信息，则合并到userInfo中（覆盖默认值）
    if (userConfig) {
      userInfo.value = {
        ...userInfo.value,  // 保留原有默认值
        ...userConfig       // 覆盖从存储中获取的信息
      };
    }
  } catch (error) {
    // 捕获并打印获取存储信息时的错误
    console.error('获取用户配置失败:', error);
  }
};

// 页面初始化时调用，加载用户信息
initUserInfo();

/**
 * 跳转到我的订单页面
 * 预留登录校验逻辑位置，实际使用时需补充登录状态判断
 */
const goToMyOrders = () => {
	console.log('跳转到我的订单页面');
	// 使用uni.navigateTo跳转到订单页面
	uni.navigateTo({
		url: '/pages/mine/myOrder'
	});
};

/**
 * 跳转到订单核销页面
 * 仅管理员可见和可点击
 */
const goToVerificationList = () => {
	console.log('跳转到订单核销页面');
	// 使用uni.navigateTo跳转到核销列表页面
	uni.navigateTo({
		url: '/pages/list/verificationList'
	});
};
</script>

<style lang="scss">
// 页面容器样式
.container {
	min-height: 100vh;  // 确保容器高度至少为屏幕高度
	background-color: #f5f5f5;  // 浅灰色背景
}

// 用户信息区域样式
.user-info-section {
	background-color: #165dff;  // 蓝色背景
	padding: 40px 20px 30px;    // 内边距：上40px 左右20px 下30px
	display: flex;
	flex-direction: column;     // 垂直方向排列子元素
	align-items: center;        // 水平居中对齐
	
	// 用户头像容器
	.user-avatar {
		margin-bottom: 20px;    // 底部外边距，与用户名保持距离

		// 头像图片样式
		.avatar {
			width: 50px;          // 宽度（注：实际可能应为rpx单位，8px过小）
			height: 50px;         // 高度，与宽度一致保持圆形
			border-radius: 50%;  // 圆角50%，使图片呈圆形
			border: 4rpx solid rgba(255, 255, 255, 0.3);  // 白色半透明边框
		}
	}

	// 用户名文本样式
	.username {
		color: #fff;           // 白色文字
		font-size: 20px;       // 字体大小
		font-weight: bold;     // 加粗显示
	}
}

// 功能菜单区域样式
.functions-section {
	background-color: #fff;  // 白色背景
	margin-top: 10px;        // 顶部外边距，与用户区域保持距离

	// 功能项样式
	.function-item {
		display: flex;              // 水平排列子元素
		align-items: center;        // 垂直居中对齐
		padding: 15px 20px;         // 内边距
		border-bottom: 1px solid #eee;  // 底部浅灰色边框，分隔不同功能项

		// 功能图标容器
		.function-icon {
			width: 24px;             // 固定宽度
			height: 24px;            // 固定高度
			margin-right: 15px;      // 右侧外边距，与文字保持距离

			// 图标图片样式
			image {
				width: 100%;         // 占满容器宽度
				height: 100%;        // 占满容器高度
			}
		}

		// 功能文本样式
		.function-text {
			flex: 1;                // 占据剩余空间
			font-size: 16px;        // 字体大小
			color: #333;            // 深灰色文字
		}

		// 右侧箭头图标样式
		.arrow-right {
			width: 15px;            // 固定宽度
			height: 15px;           // 固定高度
		}
	}
}

// 页脚样式
.footer {
	text-align: center;      // 文字居中对齐
	margin-top: 30px;        // 顶部外边距，与功能区域保持距离

	// 版本号文本样式
	.version {
		font-size: 12px;       // 小字体
		color: #999;           // 灰色文字，不抢眼
	}
}
</style>